<template>
  <div class="header">
    <h2 class="title">
      用户买东西不用钱管理系统
      <div class="night-model" >
        <span>夜间模式</span>
        <span @click="toNight()">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">夜间模式</el-switch>
        </span>
      </div>
    </h2>
    <div class="user-info">
      <span class="user-pic"></span>
      <span class="user-name">
        <el-tooltip placement="top" effect="light">
          <div slot="content">
            <span class="exitLogin" @click="exitLogin()">退出登录</span>
          </div>
          <el-button>{{name == "" ? '请先登录':name}}</el-button>
        </el-tooltip>
      </span>
    </div>
  </div>
</template>
<script>
import API from "../../common/js/api";
import ajax from "../../common/js/ajax";
export default {
  data() {
    return {
      name: "",
      value: false
    };
  },
  methods: {
    exitLogin() {
      ajax(
        API.exitLogin,
        "get",
        {},
        d => {
          this.$message({
            type: "success",
            message: "退出登录成功"
          });
          localStorage.setItem("user", JSON.stringify({ name: "", type: "" }));
          this.$router.replace("/login");
        },
        err => {
          alert(err.data.info);
        }
      );
    },
    toNight() {
      localStorage.setItem("isNight", this.value.toString());
      setTimeout(() => {
        this.$router.go(0);
      }, 300);
    }
  },
  watch: {},
  computed: {},
  mounted() {
    this.value = JSON.parse(localStorage.getItem("isNight"));
    // 服务端session已开启
    this.name = JSON.parse(localStorage.getItem("user")).name;
  }
};
</script>
<style lang="stylus" scpoed>
@import '../../common/css/index.styl';

.header {
  position: relative;
  background: #409eff;
  width: 100%;
  height: 120px;
  min-height: 120px;
}

.title {
  color: #fff;
  line-height: 120px;
  font-size: 36px;
  padding-left: 50px;
}

.user-pic {
  display: inline-block;
  margin-right: 30px;
  background: url('../../assets/img/pic.jpg');
  background-size: 100%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  vertical-align: middle;
}

.user-name {
  display: inline-block;
  padding: 0 5px;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  cursor: pointer;
}

.user-info {
  position: absolute;
  font-size: 24px;
  color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
  right: 80px;
}

.exitLogin {
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.night-model {
  float: right;
  margin-right: 400px;
  font-size: 24px;
}
</style>